<template>
    <view>
        <uni-notice-bar
                show-icon="true"
                scrollable="true" single="true"
                text="请注意，因为没有企业资质，受微信/支付宝的开发支付功能影响，所有本系统的充值功能，是直接给账户加钱！！">
        </uni-notice-bar>

        <view class="coupon_box">
            <view class="coupon-item" v-for="(item, index) in allList" :key="index">
                <view class="coupon-money">
                    <view class="layof">￥{{item.money}}</view>
                    <view class="msg">{{item.created_at}}充值记录</view>
                </view>
                <view class="get-btn">知道了</view>
            </view>
        </view>

        <view class="loadmore">
            <uni-load-more :status="loadMoreStatus"></uni-load-more>
        </view>
    </view>
</template>

<script>
    import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
    import { recharge } from '../../common/config'
    import uniLoadMore from "@/components/uni-load-more"

    export default {
        components: {uniNoticeBar,uniLoadMore},
        computed: {},
        data(){
            return {
                allList:[],
                page: 1,
                loadMoreStatus:'more'
            }
        },
        created(){
            this.GetList();
        },
        //上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
        onReachBottom(){
            this.loadMoreStatus = 'loading';
            this.GetList()
        },
        methods:{
            async GetList(){
                await this.$api.MyRequest(recharge.GetRecharge.url, recharge.GetRecharge.method,{page: this.page})
                    .then((res) => {
                        if (res.data.length != 0) {
                            this.page = res.current_page + 1;
                            this.allList = this.allList.concat(res.data);
                            this.loadMoreStatus = 'more'
                        }
                        else {
                            this.loadMoreStatus = 'noMore'
                        }
                    })
                    .catch((e) => {
                    })
            },
        }
    }
</script>

<style lang='scss'>
    page { background:#FFFFFF; }
    .coupon_box {
        width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx;
    }

    .other_type {
        width:100%; height:90upx; padding-top:50upx;

        .text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; }
        .text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:28upx; }
    }
    .coupon-item {
        width:100%; height:auto; display:table; border-radius:10upx; padding:0 20upx; margin-top:22upx; border:1px solid #eeeeee; position:relative;
        .coupon-money {
            width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;

            .nick { width:100%; height:50upx; line-height:30upx; font-size:24upx; color:#999999; }
            .tit { width:100%; height:50upx; line-height:50upx; font-size:24upx; color:#999999; }
            .demand { width:100%; height:30upx; line-height:30upx; font-size:24upx; color:#999999; }

            .layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
            .msg { width:100%; height:30upx; line-height:30upx; font-size:24upx; color:#999999; }
        }
        .get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:24upx; float:right; background:#ffffff}
    }
    .coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:#FFFFFF; border:1px solid #eeeeee; border-top:0px; }
    .coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:#FFFFFF; border:1px solid #eeeeee; border-bottom:0px; }
    .loadmore{
        text-align: center;
        margin: 0 auto;
    }
</style>